<template>
	<div>
		<div class="tabNav">
			<router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
			<b>/<i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-order"></i>佣金发放</b>
		</div>
		<div class="registerCon">
			<div class="tregisterTab">
				<ul>
					<li :class="nextStep == 1 ? 'active' : '' ">
						<div><span>1</span>发佣信息录入</div><img src="../assets/img/register1.jpg" /><img class="on" src="../assets/img/register03.jpg" /></li>
					<li :class="nextStep == 2 ? 'active' : '' ">
						<div><span>2</span>员工数据导入</div><img src="../assets/img/register2.jpg" /><img class="on" src="../assets/img/register02.jpg" /></li>
					<li :class="nextStep == 3 ? 'active' : '' ">
						<div><span>3</span>完成</div><img src="../assets/img/register3.jpg" /><img class="on" src="../assets/img/register01.jpg" /></li>
				</ul>
			</div>
			<div class="add-task recharge">
				<el-form
				:model="taskForm"
				:rules="rules"
				v-if="nextStep == 1"
				ref="taskForm"
				class="demo-ruleForm"
				>
					<el-form-item label="选择项目：" prop="projectName">
						<el-select class="settlementWidth" v-model="projectNo" placeholder="请选择项目">
							<el-option
							v-for="item in tableData"
							:key="item.projectName"
							:label="item.projectName"
							:value="item.id"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<div class="login-btn">
							<el-button @click="_Backtop">取消</el-button>
							<el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
						</div>
					</el-form-item>
				</el-form>
				<el-form
				:model="taskForm"
				:rules="rules1"
				v-if="nextStep == 2"
				ref="taskForm"
				label-width="100px"
				class="demo-ruleForm demo-ruleForms"
				>
					<el-form-item v-if="!paymentInfo" style="padding: 60px 0;">
						<el-upload
						ref="upload"
						name="excel"
						:multiple="false"
						:limit="1"
						:auto-upload="false"
						accept=".xlsx, .xls"
						action="#"
						:file-list="fileList"
						:on-change="xlsxFilelist"
						:on-remove="deleteXlsxfile"
						drag
						>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						</el-upload>
						<div class="el-upload__tip text-center">
							<span>说明:请上传标准格式的excel薪资文档。也可以直接下载<span style="cursor: pointer;color: #326cf0;" @click="openUrls">佣金发放模版.xls</span></span>
							<br>
							<span>注意:仔细核对文件内 员工信息、薪资信息、银行卡号等信息</span>
						<!-- <span style="margin-left: 60px">仅允许导入xls、xlsx格式文件。</span>
						<span style="cursor: pointer;color: #326cf0;" @click="openUrl">下载模板</span> -->
						</div>
					</el-form-item>
					<div class="paymentInfo" v-if="paymentInfo">
						<el-button v-if="paymentInfos == 1 && paymentInfos1 == 1" style="float:right" type="primary" @click="excelDownloads()">下载异常信息</el-button>
						<div class="tabNav" v-if="settlementAmounts">
							<em>
								&nbsp;文件导入预览:预计发放人数 <strong>
									{{ SettlementAmount.personNum }}<!-- {{ amount }} -->
								</strong>人，服务费:<strong>￥{{ SettlementAmount.fee }}</strong>，发放佣金 <strong>￥{{ SettlementAmount.amount }}</strong>，结算金额 <strong>￥{{ SettlementAmount.settlementAmount }}</strong>。请仔细核对上传文件信息！</em>
							<em>
								&nbsp;充值金额<strike>￥{{ SettlementAmount.rechargeAmount }}</strike>，当前余额:<strike>￥{{ SettlementAmount.currentBalance }}</strike>，需充值金额:<strike>￥{{ SettlementAmount.needRechargeAmount }}</strike>，冻结金额：<strike>￥{{ SettlementAmount.freezeBalance }}</strike>，可用余额：<strike>￥{{ SettlementAmount.remainBalance }}</strike>
								<div class="refreshs" @click="refreshs()">
									<i class="el-icon-refresh" style="font-size: 14px;position: relative;top: 1px;margin-right: 3px;"></i>
									余额刷新</div>，
								如余额不足请先充值！</em>
						</div>
						<div class="tabNav" v-if="!settlementAmounts">
							<em>
								&nbsp;<strike style="color:rgb(255, 12, 0)">结算单异常，请重新上传！</strike>
							</em>
						</div>
						<b @click="paymentInfo1" :class="paymentInfos == 0 ? 'active' : ''">打款信息<span>（{{settlementDetailArr.length}}）</span></b>
						<b style="color: rgb(255 12 0);" @click="paymentInfo2" :class="paymentInfos == 1 ? 'active' : ''">异常信息<span>（{{settlementDetailArr1.length}}）</span></b>
						<div class="cardTits" v-if="paymentInfos == 0">
							<el-table :data="settlementDetailArr" stripe style="width: 100%" @sort-change="sortChange1" max-height="330px">
								<el-table-column prop="name" sortable="custom" label="姓名" width="120">
								</el-table-column>
								<el-table-column prop="phone" sortable="custom" label="手机号">
								</el-table-column>
								<el-table-column prop="idcard" sortable="custom" label="身份证号">
								</el-table-column>
								<el-table-column prop="bankNo" sortable="custom" label="银行卡号">
								</el-table-column>
								<el-table-column prop="amount" sortable="custom" label="发放金额">
									<template #default="item">
										{{ formatNumber(item.row.amount) }}
									</template>
								</el-table-column>
								<el-table-column prop="bonus" sortable="custom" label="备注">
								</el-table-column>
							</el-table>
							<!-- <el-pagination v-if="settlementDetailArr.length > 0" @size-change="renwuPageChange" @current-change="renwuCurrentChange"
								:current-page="renwuCurrentPage" :page-sizes="renwuArrPage" :page-size="renwuSelectPage"
								layout="total, sizes, prev, pager, next, jumper" :total="renwuTotal">
							</el-pagination> -->
						</div>
						<div class="cardTits" v-if="paymentInfos == 1">
							<el-table :data="settlementDetailArr1" stripe style="width: 100%" @sort-change="sortChange1" max-height="380px">
								<el-table-column prop="name" sortable="custom" label="姓名" width="120">
								</el-table-column>
								<el-table-column prop="phone" sortable="custom" label="手机号">
								</el-table-column>
								<el-table-column prop="idcard" sortable="custom" label="身份证号">
								</el-table-column>
								<el-table-column prop="bankNo" sortable="custom" label="银行卡号">
								</el-table-column>
								<el-table-column prop="amount" sortable="custom" label="发放金额">
									<template #default="item">
										{{ formatNumber(item.row.amount) }}
									</template>
								</el-table-column>
								<el-table-column prop="abnormalReason" sortable="custom" label="异常信息">
								</el-table-column>
							</el-table>
							<!-- <el-pagination v-if="settlementDetailArr1.length > 0" @size-change="renwuPageChange1" @current-change="renwuCurrentChange1"
								:current-page="renwuCurrentPage1" :page-sizes="renwuArrPage1" :page-size="renwuSelectPage1"
								layout="total, sizes, prev, pager, next, jumper" :total="renwuTotal1">
							</el-pagination> -->
						</div>
						<el-form-item>
							<div class="login-btn">
								<el-button @click="_Backlast()">返回上一步</el-button>
								<el-button @click="_Backre()">重新上传</el-button>
								<el-button type="primary" @click="submitForm1('ruleForm')">下一步</el-button>
							</div>
						</el-form-item>
						
					</div>
				</el-form>
				
				<div class="infoCons" v-if="nextStep == 3">
					<!-- <ul class="nextFirst nextSecond nextThird"></ul> -->
					<ul :class="rechargeChange">
						<li style="margin-left: 6%;">
							<span><b>1</b></span>
							<em>待发薪</em>
							<strong></strong>
						</li>
						<li>
							<span><b>2</b></span>
							<em>平台打款审核中</em>
							<strong></strong>
						</li>
						<li style="width: auto;">
							<span><b>3</b></span>
							<em>已完成</em>
						</li>
					</ul>
					<div class="infoConLine"></div>
					<div style="clear: both;"></div>
					<el-form-item>
						<div class="login-btn login-btns">
							<el-button @click="_Backtop()">返回列表</el-button>
							<el-button type="primary" @click="submitForm2('ruleForm')">继续发佣</el-button>
						</div>
					</el-form-item>
					<div style="clear: both;"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios";	
	export default {
		name: "dashboard",
		data() {
			return {
				infos: JSON.parse(localStorage.getItem("bussines_info")),
				settlementStatus: {
					// 结算状态
					1: "未打款",
					2: "已打款",
					3: "已作废",
				},
				businessId: JSON.parse(localStorage.getItem("bussines_info")).businessId,
				nextStep: 1,
				fileList: [],
				paymentInfo: false,
				projectNo: '',
				rechargeStatus: 1,
				rechargeChange: '',
				excelDownloadShow: false,
				orderByZH: false,
				orderByAsc: false,
				orderByColume: 'createTime',
				currentPage: 1,
				renwuTotals: 0, // 结算任务明细总条数
				total: 0, // 总条数
				arrPage: [10, 20], // 每页条数
				selectPage: 10, // 每页选中条数
				tableData: [],
				settleNos: '',
				refresh1: 0,
				tableData1: [],
				SettlementAmount: [],
				paymentInfos: 0,
				paymentInfos1: 0,
				renwuTotal: 0, // 结算任务明细总条数
				renwuCurrentPage: 1, // 结算任务明细当前页
				renwuArrPage: [10, 20], // 结算任务明细每页条数
				renwuSelectPage: 10, // 结算任务明细每页选中条数
				settlementDetailArr: [], // 任务结算明细table数据
				settlementDetailShow: false, // 是否显示结算任务明细
				renwuTotal1: 0, // 结算任务明细总条数
				renwuCurrentPage1: 1, // 结算任务明细当前页
				renwuArrPage1: [10, 20], // 结算任务明细每页条数
				renwuSelectPage1: 10, // 结算任务明细每页选中条数
				settlementDetailArr1: [], // 任务结算明细table数据
				settlementAmounts: false,
				input1: '',
				value1: '',
				startTime: '',
				endTime: '',
				serveTime: '',
				auditStatus: {
					0: '待审核'
				},
				id: '',
				busid: ''
			};
		},
		components: {},
		mounted() {
			if(this.rechargeStatus == 1){
				this.rechargeChange = 'nextFirst'
			}else if(this.rechargeStatus == 2){
				this.rechargeChange = 'nextFirst nextSecond'
			}else if(this.rechargeStatus == 3){
				this.rechargeChange = 'nextFirst nextSecond nextThird'
			}
			this.getTaskList()
		},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},

		methods: {
			paymentInfo1(){
				this.paymentInfos = 0
			},
			paymentInfo2(){
				this.paymentInfos = 1
			},
			_Backtop(){
				this.$router.push("/settlements")
			},
			_Backlast(){
				this.nextStep = 1
				this.projectNo = ''
				this.fileList = []
			},
			_Backre(){
				this.fileList = []
				this.paymentInfo = false
			},
			xlsxFilelist(file) {
				this.fileList = [file]
				let files = new FormData()
                files.append("file", this.fileList[0].raw)
                files.append("projectId", this.projectNo)
                this.$http({
                    url: "/api/quick/numb/addSettlementInfo",
                    method: "post",
                    headers: {
                    "Content-Type": "multipart/form-data",
                    },
                    data: files
                }).then((data) => {
                    if (data.code == 0) {
						if(data.msg == "success") {
							this.addTaskModule = false
							this.$message({
							message: '上传成功!',
							type: 'success',
							offset: 60
							})
							this.paymentInfo = true
							this.fileList = []
							this.settleNos = data.result.settleNo
							if(data.result.failVo.length == 0){
								this.getSelectPlatform()
								this.settlementAmounts = true
							}
							this.settlementDetailArr = data.result.successVo
							// this.renwuTotal = data.result.total

							this.settlementDetailArr1 = data.result.failVo
							if(this.settlementDetailArr1.length > 0){
								this.paymentInfos1 = 1
							}
							// this.renwuTotal1 = data.result.total
						}else {
							this.$message({
							message: '上传失败！',
							type: 'error',
							offset: 60
							})
						}
                    }
                });
			},
			deleteXlsxfile() {
				this.fileList = []
			},
			getSelectPlatform() {
				this.$http({
					url: '/api/quick/numb/getSettlementAmount',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						settlementNo: this.settleNos,
						"pageNum": this.renwuCurrentPage,
						"pageSize": this.renwuSelectPage,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					if(data.code === 0) {
						this.SettlementAmount = data.result
					}
				})
				// 获取灵活用功平台信息
				// this.$http({
				// 	url: '/api/quick/numb/getNumbDetailPage',
				// 	method: 'post',
				// 	headers: {
				// 		'Content-Type': 'application/json'
				// 	},
				// 	data: {
				// 		settleNo: this.settleNos,
				// 		"pageNum": this.renwuCurrentPage,
				// 		"pageSize": this.renwuSelectPage,
				// 		orderByAsc: this.orderByAsc, // 是否正序
				// 		orderByColume: this.orderByColume, // 排序字段
				// 		orderByZH: this.orderByZH, // 是否汉字
				// 	}
				// }).then(data => {
				// 	if(data.code === 0) {
						// this.settlementDetailArr = data.result.list
						// this.renwuTotal = data.result.total
				// 	}
				// })
				// 异常结算明细分页查询
				// this.$http({
				// 	url: '/api/quick/numb/getNumbAbPage',
				// 	method: 'post',
				// 	headers: {
				// 		'Content-Type': 'application/json'
				// 	},
				// 	data: {
				// 		settleNo: this.settleNos,
				// 		"pageNum": this.renwuCurrentPage,
				// 		"pageSize": this.renwuSelectPage,
				// 		orderByAsc: this.orderByAsc, // 是否正序
				// 		orderByColume: this.orderByColume, // 排序字段
				// 		orderByZH: this.orderByZH, // 是否汉字
				// 	}
				// }).then(data => {
				// 	if(data.code === 0) {
						// this.settlementDetailArr1 = data.result.list
						// this.renwuTotal1 = data.result.total
				// 	}
				// })
			},

			openUrls() {
				window.open('https://media.iscqifuxinxi.com/template/%E4%BD%A3%E9%87%91%E5%8F%91%E6%94%BE%E6%A8%A1%E7%89%88.xlsx')
			},
			submitForm2(){
				this.nextStep = 1;
				this.projectNo = ''
				this.fileList = []
			},
			// 校对验证码
			submitForm() {
				if(this.projectNo == ''){
					this.$message({
					message: '请选择项目',
					type: 'error',
					offset: 60
					})
					return false
				}else{
					// this.projectNo = ''
					// this.fileList = []
					this.paymentInfo = false
					this.nextStep = 2;
				}
			},
			submitForm1() {
				if(this.settlementDetailArr1.length > 0){
					this.$message({
						message: '佣金发放模版异常请重新上传！',
						type: 'error',
						offset: 60
					})
				}else{
					this.nextStep = 3;
				}
				// this.$http({
				// 	url: "/api/quick/numb/doNumbSalary",
				// 	method: "post",
				// 	headers: {
				// 	"Content-Type": "application/json",
				// 	},
				// 	data: {
				// 		settleNo: this.settleNos,
				// 	},
				// }).then((data) => {
				// 	if (data.code == 0) {
				// 		this.nextStep = 3;
				// 	}
				// });
			},
			getTaskList() {
			// 获取列表信息
				this.$http({
					url: "/api/quick/project/getProjectPage",
					method: "post",
					headers: {
					"Content-Type": "application/json",
					},
					data: {
					pageNum: 1,
					pageSize: 100,
					businessId: this.businessId,
					},
				}).then((data) => {
					if (data.code == 0) {
					this.tableData = data.result.list
					}
				});
			},
			settlementDetails(id, busid) {
				// 结算任务明细
				this.id = id
				this.busid = busid
				this.settlementDetailShow = true
				this.getRenwuTableData(1, 10)
			},
			renwuCurrentChange(val) {
				// 结算任务明细切换分页
				this.renwuCurrentPage = val
				this.getSelectPlatform()
			},
			renwuPageChange(val) {
				// 结算任务明细切换当前页显示条数
				this.renwuCurrentPage = val
				this.getSelectPlatform()
			},
			renwuCurrentChange1(val) {
				// 结算任务明细切换分页
				this.renwuCurrentPage1 = val
				this.getSelectPlatform()
			},
			renwuPageChange1(val) {
				// 结算任务明细切换当前页显示条数
				this.renwuCurrentPage1 = val
				this.getSelectPlatform()
			},
			openUrl(url) {
				// console.log(url.slice(5))
				// 打开新窗口查看协议
				if(url === '' || url === null || url === undefined) return
				let str = url.substring(0, url.indexOf('?'))
				let suffix = str.substring(str.lastIndexOf('.'), url.length)
				if(suffix === '.PDF' || suffix === '.pdf') {
					window.open(url)
				}else {
					let newwin = window.open();
					newwin.document.write("<img src=" + url + " />");
				}
			},
			sortChange(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "legalName"|| d.id == "receiveBank") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
				this.getTableData();
			},
			sortChange1(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "taskName"|| d.id == "legalName") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
				this.getRenwuTableData(1, this.renwuSelectPage)
			},
			// 余额查询
			refreshs(){
				this.$http({
					url: "/api/quick/wallet/business/balance",
					method: "post",
					headers: {
					"Content-Type": "application/json",
					},
					data: {
						selfMode: this.infos.plateMode,
						settlementNo: this.SettlementAmount.settlementNo
					},
				}).then((data) => {
					if (data.code == 0) {
						this.SettlementAmount.currentBalance = data.result.balance
						this.SettlementAmount.rechargeAmount = data.result.allAmount
						this.SettlementAmount.needRechargeAmount = data.result.rechargeAmount
					}
				});
			},
			excelDownloads() {
				// 异常结算明细下载
				let info = JSON.parse(localStorage.getItem("bussines_info"))
				axios({
					method: "POST",
					url: "/api/quick/numb/downAbDetails",
					data: {
						settleNo: this.settleNos,
					},
					responseType: "blob",
					headers: {
						"businessType": 3,
						"websiteName": window.location.hostname,
						"Authorization": localStorage.getItem("bussines_token"),
						"businessId": this.businessId,
						"businessNo": info.businessNo,
						"platformId": info.platformId,
						"platformNo": info.platformNo,
					},
				})
				.then((res) => {
				const blob = new Blob([res.data]);
				const downloadElement = document.createElement("a");
				const href = window.URL.createObjectURL(blob);
				//后台再header中传文件名
				downloadElement.href = href;
				downloadElement.download = "异常信息名单-" + '-' + this.format("yyyyMMddhhmmss", new Date()) + ".xlsx";
				document.body.appendChild(downloadElement);
				downloadElement.click();
				document.body.removeChild(downloadElement); // 下载完成移除元素
				window.URL.revokeObjectURL(href); // 释放掉blob对象
				this.excelDownloadShow = false
				})
				.catch((err) => {
				console.log(err);
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
.billing-item {
  margin-top: 30px;
  height: 120px;
  background: #ffffff;
  box-shadow: 0px 2px 24px 0px rgba(238, 244, 251, 0.9);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  .billing-item-left {
    .status {
      font-size: 14px;
      font-weight: 500;
      color: #0a2e6a;
      line-height: 20px;
    }
    .desc {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6c8198;
      line-height: 17px;
      margin-top: 2px;
    }
    .money {
      font-size: 18px;
      font-family: DIN-Bold, DIN;
      font-weight: bold;
      color: #0a2e6a;
      margin-top: 14px;
      line-height: 18px;
    }
  }
  .billing-item-right {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .billing-item-right.bule {
    background-color: #e6f1ff;
  }
  .billing-item-right.orange {
    background-color: #fef3ef;
  }
  .billing-item-right.violet {
    background-color: #f1ebfb;
  }
}
</style>
<style scoped>
.refreshs {
	display: inline-block;
	cursor: pointer;
	color: #dd0b01;
	font-weight: bold;
}
.tabNav {
	margin-bottom: 20px;
}
.tabNav strong {
	color: #e96725;
}
.tabNav strike {
	color: #dd0b01;
    font-weight: bold;
    text-decoration: none;
}
.infoCons {
	margin: 50px 15% 35px;
	position: relative;
	top: 90px;
    left: 30px;
}
.infoCons ul li {
	float: left;
	width: 38%;
	position: relative;
}
.infoCons ul li span {
	display: inline-block;
    background: rgb(204, 204, 204);
    width: 44px;
    height: 44px;
    border-radius: 100%;
	position: relative;
    z-index: 3;
}
.infoCons ul li b {
	background: rgb(204, 204, 204);
    width: 36px;
    height: 36px;
    display: inline-block;
    text-align: center;
    line-height: 36px;
    border-radius: 100%;
    color: #fff;
    position: relative;
    z-index: 1;
    top: 3px;
    left: 3px;
    border: 1px solid #fff;
}
.infoCons ul li em {
	display: block;
    font-size: 13px;
    font-style: normal;
    color: #6C8198;
    width: 100px;
    text-align: center;
    margin: 10px 0 30px -28px;
}
.infoCons ul li strong {
	width: 100%;
    position: absolute;
    left: 10px;
    height: 4px;
    background: #ccc;
    top: 21px;
    z-index: 2;
}

.infoCons ul li:nth-child(1) span,.infoCons ul li:nth-child(1) b {
	background-color: rgb(52, 73, 94);
}
.infoCons ul:nth-child(1) li em {
	color: rgb(52, 73, 94);
}

.infoCons ul.nextFirst li:nth-child(1) span,.infoCons ul.nextFirst li:nth-child(1) b,.infoCons ul.nextFirst li:nth-child(1) strong {
	background-color: #326CF0;
}
.infoCons ul.nextFirst li:nth-child(1) em {
	color: #326CF0;
}

.infoCons ul.nextFirst li:nth-child(2) span,.infoCons ul.nextFirst li:nth-child(2) b {
	background-color: rgb(52, 73, 94);
}
.infoCons ul.nextFirst li:nth-child(2) em {
	color: rgb(52, 73, 94);
}

.infoCons ul.nextSecond li:nth-child(2) span,.infoCons ul.nextSecond li:nth-child(2) b,.infoCons ul.nextSecond li:nth-child(2) strong {
	background-color: #326CF0;
}
.infoCons ul.nextSecond li:nth-child(2) em {
	color: #326CF0;
}

.infoCons ul.nextSecond li:nth-child(3) span,.infoCons ul.nextSecond li:nth-child(3) b {
	background-color: rgb(52, 73, 94);
}
.infoCons ul.nextSecond li:nth-child(3) em {
	color: rgb(52, 73, 94);
}

.infoCons ul.nextThird li:nth-child(3) span,.infoCons ul.nextThird li:nth-child(3) b,.infoCons ul.nextThird li:nth-child(3) strong {
	background-color: #326CF0;
}
.infoCons ul.nextThird li:nth-child(3) em {
	color: #326CF0;
}

.infoCons ul.nextThird li:nth-child(4) span,.infoCons ul.nextThird li:nth-child(4) b {
	background-color: #326CF0;
}
.infoCons ul.nextThird li:nth-child(4) em {
	color: #326CF0;
}

.infoConLine {
    position: absolute;
    top: 21px;
    left: 8.5%;
    width: 75%;
    height: 4px;
    background: #cccccc;
}
.cardTit {
    color: rgba(10, 46, 106, 1);
    line-height: 50px;
    padding-left: 20px;
    font-size: 14px;
    font-weight: normal;
}
.excelDownload {
    position: absolute;
    right: 30px;
    top: 10px;
    cursor: pointer;
    z-index: 111;
}
.serveTime {
	float: left;
    margin-left: 50px;
    position: relative;
    top: 10px;
}
.showCloro {
	cursor: pointer;
	color: #326CF0;
    text-align: left;
}
.tregisterTab {
    margin: 40px 5% 70px;
}
.tregisterTab ul li {
    float: left;
    width: 33.33%;
    text-align: center;
    font-size: 18px;
    color: #95A8BE;
    line-height: 70px;
    height: 70px;
    position: relative;
    overflow: hidden;
}
.tregisterTab ul li > div {
    position: relative;
    z-index: 11;
}
.tregisterTab ul li img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70px;
}
.tregisterTab ul li img.on {
    display: none;
}
.tregisterTab ul li.active img.on {
    display: block;
}
.tregisterTab ul li.active {
    color: #fff;
}
.tregisterTab ul li span {
    width: 30px;
    height: 30px;
    background: #B9C7D6;
    text-align: center;
    border-radius: 100%;
    display: inline-block;
    line-height: 30px;
    margin-right: 20px;
}
.tregisterTab ul li.active span {
    color: #326CF0;
    background: #fff;
}
.registerCon{
    width: 100%;
    float: left;
    margin: 0 0% 50px;
    background: #fff;
    box-shadow: 0px 4px 6px 0px #E1EFFF;
    border-radius: 10px;
}
.login-btn {
	text-align: center;
	margin: 100px 0 50px;
}
.login-btn button{
    width: 100px;
    height: 40px;
}
</style>
<style>
.recharge .el-upload--text {
	border: 0;
	display: inline-block !important;
}
.recharge {
	margin-top: 180px;
	min-height: 300px;
}
.recharge .el-form-item__label {
	margin-left: calc(50% - 145px);
}
.demo-ruleForms .el-form-item__content {
	margin: 0 auto !important;
    text-align: center;
}
.el-upload-list {
	width: 360px;
	margin: auto;
}
.paymentInfo {
	width: 90%;
	margin: 0 5%;
	float: left;
}
.paymentInfo b {
	width: 50%;
    float: left;
    text-align: center;
    height: 60px;
    line-height: 60px;
	background: rgb(238, 244, 252);
    cursor: pointer;
	color: #95A8BE;
}
.paymentInfo b.active {
	background: #5393f5;
	color: #fff;
}
.login-btns {
	margin: 120px 0 100px !important;
    width: 92%;
}
</style>